<script>
import ButtonList from '@/components/ButtonList'
import WrapTable from '@/components/WrapTable'
import { commonMixin } from '@/mixins/common'
import request from '@/utils/request.js'
import { getCodeList } from '@/api/dictionary'
import store from './store.js'

export default {
  name: 'datagroupLook',
  tag: 'noKeepalive',
  mixins: [commonMixin, store],
  components: {
    ButtonList,
    WrapTable
  },
  data() {
    return {
      form: {
        datagroupCode: '',
        datagroupName: '',
        datagroupNote: '',
        isEnable: true
      },
      datagroupInfoUrl: '/v1/yq/datagroup/findInfoById',
      getCodeTypeListUrl: '/v1/dataProvider/getCodeTypeList', // 获取代码url
      resultsymbolUrl: '/v1/yq/resultsymbol/cykablyat', // 获取运算符url
      businessobjectUrl: '/v1/yq/meatbustype/query',
      sysDatagroup: {},
      tableFieldList: [],
      bustypes: [],
      conditionData: [],
      tableData: [],
      allBusinessobjectData: [],
      allResultsymbolData: [],
      allCodeTypeListData: [],
      conditionColumns: [
        {
          prop: 'specialType',
          label: '条件分类',
          sortable: true,
          'header-align': 'center',
          width: '105',
          'show-overflow-tooltip': true,
          align: 'left',
          formatter: (row, column, cellValue) =>
            cellValue === 0
              ? row.dicCodeType
                ? '代码类型'
                : '业务对象'
              : '机构'
        },
        {
          prop: 'bustypeObjId',
          label: '业务对象/代码类型/授权方式',
          sortable: true,
          'header-align': 'center',
          'show-overflow-tooltip': true,
          width: '230',
          align: 'left',
          formatter: (row, column, cellValue) => {
            if (row.specialType) {
              return '机构'
            } else if (!row.dicCodeType) {
              return this.allBusinessobjectData.filter(
                item => item.objId === cellValue
              )[0].objName
            } else {
              return this.allCodeTypeListData.filter(
                item => item.type === row.dicCodeType
              )[0].name
            }
          }
        },
        {
          prop: 'bustypeCondition',
          label: '运算符',
          sortable: true,
          'header-align': 'center',
          width: '120',
          'show-overflow-tooltip': true,
          align: 'left',
          formatter: (row, column, cellValue) => {
            if (row.specialType) {
              return ''
            } else {
              if (cellValue) {
                return this.allResultsymbolData.filter(
                  item => item.objId === cellValue
                )[0].symbolName
              }
              return ''
            }
          }
        },
        {
          prop: 'bustypeDesc',
          label: '条件',
          ref: 'bustypeDesc',
          sortable: true,
          'header-align': 'center',
          width: '120',
          'show-overflow-tooltip': true,
          align: 'left',
          scopedSlots: {
            default: scope => {
              if (scope.row.specialType) {
                return ''
              } else if (!scope.row.dicCodeType) {
                return <div>{scope.row.bustypeDesc}</div>
              } else {
                if (scope.row.codeList.length > 0) {
                  return scope.row.codeList.filter(
                    item => item.codeId == scope.row.bustypeDesc
                  )[0].codeName
                }
                return ''
              }
            }
          }
        },
        // { prop: 'bustypeDesc', label: '分配机构', sortable: true, 'min-width': '120', 'header-align': 'center', 'show-overflow-tooltip': true, align: 'center',
        {
          prop: 'groupName',
          label: '分配机构',
          sortable: true,
          'min-width': '120',
          'header-align': 'center',
          'show-overflow-tooltip': true,
          align: 'center',
          formatter: (row, column, cellValue) => {
            if (row.specialType) {
              if (parseInt(row.specialType) === 1) {
                return '本机构'
              } else if (parseInt(row.specialType) === 2) {
                return '本机构及下级机构'
              } else {
                return cellValue
              }
            } else {
              return ''
            }
          }
        }
      ],
      tableColumns: [
        {
          prop: 'dbName',
          label: '数据源',
          sortable: true,
          'header-align': 'center',
          'min-width': '120',
          'show-overflow-tooltip': true,
          align: 'center'
        },
        {
          prop: 'firstName',
          label: '一级分类',
          sortable: true,
          'header-align': 'center',
          'min-width': '120',
          'show-overflow-tooltip': true,
          align: 'center'
        },
        {
          prop: 'secondName',
          label: '二级分类',
          sortable: true,
          'header-align': 'center',
          'min-width': '120',
          'show-overflow-tooltip': true,
          align: 'center'
        },
        {
          prop: 'tableName',
          label: '表',
          sortable: true,
          'header-align': 'center',
          'min-width': '120',
          'show-overflow-tooltip': true,
          align: 'center'
        },
        {
          prop: 'fieldName',
          label: '授予字段',
          sortable: true,
          'header-align': 'center',
          'min-width': '240',
          'show-overflow-tooltip': true,
          align: 'center'
        }
      ]
    }
  },
  computed: {
    datagroupId() {
      return this.$route.params['datagroupId']
    }
  },
  created() {
    // this.getInfo({ datagroupId: this.datagroupId })

    let promise = []
    promise.push(this.getAllBusinessData())
    promise.push(this.getAllResultsymbolData())
    promise.push(this.getAllCodeTypeListDataInfo())
    promise.push(this.getInfo({ datagroupId: this.datagroupId }))
    Promise.all(promise)
      .then(results => {
        this.allBusinessobjectData = results[0]
        this.allResultsymbolData = results[1]
        this.allCodeTypeListData = results[2]
        this.conditionData = results[3]
      })
      .catch(err => {
        console.log(err)
      })
  },
  methods: {
    getInfo(params) {
      return new Promise(resolve => {
        request({
          url: this.datagroupInfoUrl,
          method: 'get',
          params
        }).then(({ success, data }) => {
          if (success) {
            if (data) {
              this.sysDatagroup = data.sysDatagroup
              this.tableFieldList = data.tableFieldList
              this.bustypes = data.bustypes
              this.handleWrapTable(this.sysDatagroup, this.tableFieldList)
            }
            resolve(this.bustypes)
          } else {
            this.$message({
              type: 'error',
              message: '获取数据组详情失败！'
            })
          }
        })
      })
    },
    handleWrapTable(conditionObj, tableFieldList) {
      this.form.datagroupCode = conditionObj.datagroupCode
      this.form.datagroupName = conditionObj.datagroupName
      this.form.datagroupNote = conditionObj.datagroupNote
      this.form.isEnable = conditionObj.isEnable ? true : false

      this.tableData = tableFieldList
    },
    getAllBusinessData() {
      return new Promise((resolve, reject) => {
        this.getBusinessobjectData().then(({ success, data }) => {
          if (success) {
            resolve(data)
          } else {
            this.$message({
              type: 'error',
              message: '获取业务对象数据失败'
            })
            reject(new Error('获取业务对象数据失败'))
          }
        })
      }).catch(err => {
        console.log(err)
        reject(err)
      })
    },
    getAllResultsymbolData() {
      return new Promise((resolve, reject) => {
        this.getResultsymbolData().then(({ success, data }) => {
          if (success) {
            resolve(data)
          } else {
            reject(new Error('获取运算符数据失败！'))
          }
        })
      }).catch(err => {
        console.log(err)
        reject(err)
      })
    },
    getAllCodeTypeListDataInfo() {
      return new Promise((resolve, reject) => {
        this.getCodeTypeListInfo().then(({ success, data }) => {
          if (success) {
            resolve(data)
          } else {
            reject(new Error('获取代码类型信息失败！'))
          }
        })
      }).catch(err => {
        console.log(err)
        reject(err)
      })
    },
    handleReturn() {
      this.$router.push({
        path: `/siteconfig/datagroup`
      })
    },
    // eslint-disable-next-line
    renderForm(h) {
      return (
        <div class='datagroup-header'>
          <c-form
            inline={true}
            ref='datagroupForm'
            props-model={this.form}
            rules={this.rules}
            class='datagroup-form-inline'>
            <c-form-item label='数据组编码' prop='datagroupCode'>
              <c-input
                v-model={this.form.datagroupCode}
                disabled
                placeholder=''></c-input>
            </c-form-item>
            <c-form-item label='数据组名称' prop='datagroupName'>
              <c-input
                v-model={this.form.datagroupName}
                disabled
                placeholder=''></c-input>
            </c-form-item>
            <c-form-item label='是否启用'>
              <c-switch
                disabled
                v-model={this.form.isEnable}
                active-color='#409EFF'
                inactive-color='#dcdfe6'></c-switch>
            </c-form-item>
          </c-form>
          <c-form class='datagroup-form-note'>
            <c-form-item label='描述'>
              <c-input
                v-model={this.form.datagroupNote}
                type='textarea'
                rows={4}
                disabled
                placeholder=''></c-input>
            </c-form-item>
          </c-form>
        </div>
      )
    },
    // eslint-disable-next-line
    renderCondition(h) {
      return (
        <div class='box'>
          <div class='box-title'>条件</div>
          <div class='box-inner'>
            <div class='box-inner-div'>{this.renderConditionWrapTable(h)}</div>
          </div>
        </div>
      )
    },
    // eslint-disable-next-line
    renderTable(h) {
      return (
        <div class='box'>
          <div class='box-title'>表</div>
          <div class='box-inner'>
            <div class='box-inner-div'>{this.renderTableWrapTable(h)}</div>
          </div>
        </div>
      )
    },
    // eslint-disable-next-line
    renderFooter(h) {
      return (
        <ButtonList
          ref='footerBtn'
          class='datagroup-footer'
          operateBtnList={this.footerBtnList}></ButtonList>
      )
    },
    // eslint-disable-next-line
    renderConditionWrapTable(h) {
      return (
        <WrapTable
          ref='conditionTable'
          class='conditon-table'
          data={this.conditionData}
          fields={this.conditionColumns}
          selectionCol={false}
          indexCol={false}
          pagination={false}
          tooltip-effect='dark'
          border
          stripe
        />
      )
    },
    // eslint-disable-next-line
    renderTableWrapTable(h) {
      return (
        <WrapTable
          ref='conditionTable'
          class='conditon-table'
          data={this.tableData}
          fields={this.tableColumns}
          selectionCol={false}
          indexCol={false}
          pagination={false}
          tooltip-effect='dark'
          border
          stripe
        />
      )
    }
  },
  // eslint-disable-next-line
  render(h) {
    return (
      <div class='datagroup-look'>
        {this.renderForm(h)}
        {this.renderCondition(h)}
        {this.renderTable(h)}
        {this.renderFooter(h)}
      </div>
    )
  },
  beforeCreate() {
    const urlArr = ((this.$route.meta && this.$route.meta.children) || []).map(
      item => item.url
    )

    this.footerBtnList = [
      {
        label: '返回',
        methods: 'handleReturn',
        url: '',
        icon: 'el-icon-circle-close-outline',
        type: '',
        disabled: false
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)
  }
}
</script>

<style lang="scss">
.datagroup-look {
  box-sizing: border-box;
  padding: 10px 40px 20px;
  width: 100%;
  .datagroup-header {
    box-sizing: border-box;
    border: 1px solid #dcdcdc;
    padding: 20px 20px 0;
    border-radius: 6px;
    margin-bottom: 20px;
    .datagroup-form-inline {
      display: flex;
      justify-content: space-between;
      .el-form-item {
        width: 32%;
        display: flex;
        .el-form-item__label {
          width: 100px;
          text-align: right;
        }
        .el-form-item__content {
          flex: 1;
        }
      }
    }
    .datagroup-form-note {
      .el-form-item__label {
        width: 100px;
        text-align: right;
      }
      .el-form-item__content {
        margin-left: 100px;
      }
    }
  }
  .box {
    flex: 1;
    padding: 10px;
    margin-top: 15px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    box-sizing: border-box;
    position: relative;
    .box-title {
      position: absolute;
      top: -9px;
      background-color: #ffffff;
      font-size: 14px;
      color: #000;
    }
    .box-inner {
      box-sizing: border-box;
      .box-inner-div {
        min-height: 200px;
        overflow: auto;
      }
    }
  }
  .datagroup-footer {
    padding: 20px 0;
    justify-content: flex-end;
  }
  .el-tooltip__popper {
    max-width: 500px;
    word-wrap: break-word;
  }
}
</style>
